<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>添加菜单</title>
  <meta th:include="~{layout/head_xadmin :: content}">
</head>
<body>
<form class="layui-form" action="" style="width: 500px;margin: 20px;">
  <div class="layui-form-item">
    <label class="layui-form-label">选择角色</label>
    <div class="layui-input-block">
      <select name="roleId" lay-verify="required" lay-search>
        <option value=""></option>
        <option value="0" th:each="r:${role}" th:value="${r.id}">[[${r.name}]]</option>
      </select>
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">选择权限</label>
    <div class="layui-input-block">
      <select name="permissionId" lay-verify="required">
        <option value=""></option>
        <option value="0" th:each="p:${permission}" th:value="${p.id}">[[${p.pattern}]]
          [[${p.action=='R'?'只读权限':'读写权限'}]]
        </option>
      </select>
    </div>
  </div>
  <div class="layui-form-item">
    <div class="layui-input-block">
      <button class="layui-btn" lay-submit lay-filter="add">立即提交</button>
    </div>
  </div>
</form>

</body>
<script>
  var form
  layui.use(['form', 'layer', 'jquery'], function () {
    form = layui.form;
    var layer = layui.layer;
    var $ = layui.jquery;
    //监听提交
    form.on('submit(add)', function (data) {
      $.ajax({
        data: data.field,
        url: '/admin/role/permission/add',
        type: 'post',
        success: function (data) {
          layer.msg(data.message)
        }
      })
      return false;
    });
  });
</script>
</html>
